export default {
    data() {
        return {
            loading: false, // 整个页面的loading状态
            viewModuleOptions: {
                delKey: 'id', // 删除、查询一条的key
                activatedIsNeed: true,//是否进入时就请求列表接口
                isFullscreen: false,// 是否全屏--不是vxe-grid属性
                ref: 'vxeGridRef',
                axios: this.$axiosAuth, // 请求的微服务，默认授权服务
                border: true,//线条表格
                height: 'auto',//定义高度
                with: 'auto',//定义高度
                align: 'center',//所有列的对齐方式
                fns: {//定义有哪些事件
                    'sort-change': this.sortChange,//排序事件
                    'page-change': this.pageChange,//分页事件
                    'checkbox-change': this.checkboxChange,//选中事件
                    'checkbox-all': this.checkboxChange,//全选事件
                    'checkbox-range-end': this.checkboxChange,//范围选择结束事件
                },
                'sort-config': {multiple: true, trigger: 'cell'}, //允许多字段组合排序并且点击表头出发
                'column-config': {isHover: true},//当鼠标移到列头时高亮
                'checkbox-config': {highlight: true, range: true},//复选框配置，选中高亮，可使用鼠标范围选中
                // 'custom-config': {},//列设置扩展
                /*'tooltip-config': {showAll: true},//所有单元格开启工具提示*/
                'toolbar-config': {//工具栏配置
                    slots: {
                        // 自定义工具栏模板
                        buttons: 'buttons',
                        tools: 'tools'
                    },
                    custom: true,//列设置
                    // zoom: true,//全屏--改由自定义了，这里只会将表格全屏存在局限
                    className: 'zero-toolbar',//自定义工具栏样式
                    refresh: true,
                    'refresh-options': {'queryMethod': this.getDataList},//开启刷新并配置点击时调用方法

                },
                'pager-config': {//分页
                    layouts: ['Total', 'Sizes', 'FullJump', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump'],//自定义布局
                    currentPage: 1,// 当前页码
                    pageSize: 20,// 每页数
                    total: 0, // 总条数
                    pageSizes: [10, 15, 20, 50, 100],//每页大小选项列表
                    align: 'left',//对齐方式
                    // autoHidden: true,//当只有一页时自动隐藏，因为用了同一个样式display导致这个属性不可用，直接用enabled属性
                    className: 'zero-pager',//自定义分页样式
                    border: true,
                    enabled: true
                },
                vxeFromArr: [],
                searchForm: { // 查询条件
                    sortObjectList: [] // 排序，asc／desc
                },
                data: [],// 数据列表
                dataListSelections: [], // 数据列表，多选项
                showSearch: true,// 显示搜索条件
                dataUrl: '', // 数据列表接口，API地址
                addUrl: '',// 添加
                updateUrl: '',// 修改
                removeUrl: '',// 删除
                byIdUrl: '',// 查看
                exportUrl: '',// 导出
                importUrl: '',// 导入
                importTemplateUrl: '',// 导入模版
                tree: {
                    enabled: false,//是否树表格
                    allTreeExpand: -1,// 是否展开所有 -1初始值 0折叠 1展开
                    options: [], //数据
                    props: {value: 'id', label: 'name', checkStrictly: true, emitPath: false} //配置
                },
                pickerOptions: {//日期范围快捷键
                    shortcuts: [
                        {
                            text: '今天',
                            onClick(picker) {
                                let start = new Date()
                                let end = new Date()
                                start.setHours(0, 0, 0)
                                end.setHours(23, 59, 59)
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '昨天',
                            onClick(picker) {
                                let start = new Date()
                                let end = new Date()
                                start.setTime(start.getTime() - 3600 * 1000 * 24)
                                end.setTime(end.getTime() - 3600 * 1000 * 24)
                                start.setHours(0, 0, 0)
                                end.setHours(23, 59, 59)
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '近7天',
                            onClick(picker) {
                                let start = new Date()
                                let end = new Date()
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
                                end.setTime(end.getTime() - 3600 * 1000)
                                start.setHours(0, 0, 0)
                                end.setHours(23, 59, 59)
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '近15天',
                            onClick(picker) {
                                let start = new Date()
                                let end = new Date()
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
                                end.setTime(end.getTime() - 3600 * 1000)
                                start.setHours(0, 0, 0)
                                end.setHours(23, 59, 59)
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '近30天',
                            onClick(picker) {
                                let start = new Date()
                                let end = new Date()
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 29)
                                end.setTime(end.getTime() - 3600 * 1000)
                                start.setHours(0, 0, 0)
                                end.setHours(23, 59, 59)
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                            text: '近3月',
                            onClick(picker) {
                                let start = new Date()
                                let end = new Date()
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 89)
                                end.setTime(end.getTime() - 3600 * 1000)
                                start.setHours(0, 0, 0)
                                end.setHours(23, 59, 59)
                                picker.$emit('pick', [start, end]);
                            }
                        },
                    ]
                }
            }
        }
    },
    created() {
        if (this.viewModuleOptions.activatedIsNeed) {
            this.getDataList()
        }
        if (this.viewModuleOptions.tree.enabled) {
            //树表格配置调整
            this.viewModuleOptions['pager-config'].enabled = false
            this.viewModuleOptions['tree-config'] = {}
            this.viewModuleOptions['tree-config'].transform = true //自动将列表转为树结构
            this.viewModuleOptions['tree-config'].reserve = true//保留展开状态
            this.viewModuleOptions['tree-config'].trigger = 'cell'//点击单元格触发
            this.viewModuleOptions['checkbox-config'].range = false //关闭范围选中
            this.viewModuleOptions['row-config'] = {}
            this.viewModuleOptions['row-config'].keyField = "id"
        }

    },
    methods: {
        // 显示获隐藏事件
        showOrHideClick() {
            this.viewModuleOptions.showSearch = !this.viewModuleOptions.showSearch
        },
        // 全屏
        toggleIsFullscreen() {
            const element = document.getElementsByClassName('zero-vxe-grid-full')[0];
            if (!this.viewModuleOptions.isFullscreen) {
                // 检查元素是否存在
                if (element) {
                    // 设置元素的样式以覆盖整个浏览器窗口
                    element.style.position = 'fixed';      // 固定定位
                    element.style.top = '0';              // 顶部对齐
                    element.style.left = '0';             // 左侧对齐
                    element.style.width = '100%';          // 宽度占满整个视口
                    element.style.height = '100vh';        // 高度占满整个视口
                    element.style.zIndex = '2000';         // 设置较高的z-index以覆盖其他元素
                    element.style.boxSizing = 'border-box'; // 确保 padding 和 border 不会增加宽度和高度
                }
            } else {
                // 检查元素是否存在
                if (element) {
                    // 设置元素的样式以覆盖整个浏览器窗口
                    element.style.position = '';      // 固定定位
                    element.style.top = '';              // 顶部对齐
                    element.style.left = '';             // 左侧对齐
                    element.style.width = '';          // 宽度占满整个视口
                    element.style.height = '';        // 高度占满整个视口
                    element.style.zIndex = '';         // 设置较高的z-index以覆盖其他元素
                    element.style.boxSizing = ''; // 确保 padding 和 border 不会增加宽度和高度
                }
            }
            this.viewModuleOptions.isFullscreen = !this.viewModuleOptions.isFullscreen
        },
        // 获取数据列表
        getDataList() {
            this.loading = true
            // 设置分页信息
            this.viewModuleOptions.searchForm.current = this.viewModuleOptions['pager-config'].currentPage
            this.viewModuleOptions.searchForm.size = this.viewModuleOptions['pager-config'].pageSize
            const config = {
                url: this.viewModuleOptions.dataUrl,
                method: 'post',
                data: this.viewModuleOptions.searchForm
            }
            return this.viewModuleOptions.axios(config).then(res => {
                this.viewModuleOptions.data = res.data
                this.viewModuleOptions['pager-config'].total = res.total
                // //用vxe-grid的enabled属性来设置是否显示分页
                // this.viewModuleOptions['pager-config'].enabled = res.total > this.viewModuleOptions['pager-config'].pageSize
                if (this.viewModuleOptions.activatedIsNeed) {
                    let ref = this.$refs[this.viewModuleOptions.ref]
                    if (ref) {
                        //清空checkbox选中
                        ref.clearCheckboxRow()
                    }
                }
                //如果是树表格,判断是展开还是折叠
                if (this.viewModuleOptions.tree.enabled) {
                    if (this.viewModuleOptions.tree.allTreeExpand === 1) {
                        this.$nextTick(() => {
                            this.$refs[this.viewModuleOptions.ref].setAllTreeExpand(true)
                        });
                    }
                    if (this.viewModuleOptions.tree.allTreeExpand === 0) {
                        this.$nextTick(() => {
                            this.$refs[this.viewModuleOptions.ref].clearTreeExpand()
                        });
                    }
                }
            }).catch(() => {
                this.viewModuleOptions.data = []
                this.viewModuleOptions['pager-config'].total = 0
            }).finally(() => {
                this.loading = false
            })
        },
        // [分页] 切换事件
        pageChange({currentPage, pageSize}) {
            this.viewModuleOptions['pager-config'].currentPage = currentPage
            this.viewModuleOptions['pager-config'].pageSize = pageSize
            this.getDataList()
        },
        //[分页] 回到第一页
        searchSubmit() {
            this.viewModuleOptions['pager-config'].currentPage = 1
            this.getDataList()
        },
        // 列表多选
        checkboxChange(checked) {
            let checkedRows = checked.records
            this.viewModuleOptions.dataListSelections = checkedRows.map(item => item[this.viewModuleOptions.delKey])
        },
        // 列表排序
        sortChange({field, order}) {
            if (this.viewModuleOptions.searchForm.sortObjectList) {
                if (this.viewModuleOptions.searchForm.sortObjectList.length > 0) {
                    let flag = false;
                    this.viewModuleOptions.searchForm.sortObjectList = this.viewModuleOptions.searchForm.sortObjectList.filter(item => {
                        if (item.column === field) {
                            flag = true;
                            if (order) {
                                //修改
                                item.direction = order.toUpperCase()
                                return true;
                            } else {
                                return false
                            }
                        }
                        return true;
                    });
                    if (!flag) {
                        //新增
                        if (order) {
                            this.viewModuleOptions.searchForm.sortObjectList.push({
                                column: field,
                                direction: order.toUpperCase()
                            })
                        }
                    }
                } else {
                    if (order) {
                        this.viewModuleOptions.searchForm.sortObjectList.push({
                            column: field,
                            direction: order.toUpperCase()
                        })
                    }
                }
            } else {
                //被重置了
                this.viewModuleOptions.searchForm.sortObjectList = [{
                    column: field,
                    direction: order.toUpperCase()
                }]
            }
            this.getDataList()
        },
        // 删除后计算分页
        calculationPage(delNum) {
            // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页
            const totalPage = Math.ceil((this.viewModuleOptions['pager-config'].total - delNum) / this.viewModuleOptions['pager-config'].pageSize) // 总页数
            this.viewModuleOptions['pager-config'].currentPage = this.viewModuleOptions['pager-config'].currentPage > totalPage ? totalPage : this.viewModuleOptions['pager-config'].currentPage
            this.viewModuleOptions['pager-config'].currentPage = this.viewModuleOptions['pager-config'].currentPage < 1 ? 1 : this.viewModuleOptions['pager-config'].currentPage
        },
        // 重置查询条件
        searchResetForm(resetObj) {
            this.viewModuleOptions['pager-config'].currentPage = 1
            this.viewModuleOptions['pager-config'].pageSize = 20
            // 重置表单 vxe-table的重置存在问题(先点击重置按钮在选择会出现很奇怪的问题),重置按钮和提交按钮在一个页面就会出现
            // const xForm = this.$refs[searchRef];
            // if (xForm) {
            //     xForm.reset();
            // }

            // 检查 resetObj 是否为有效的普通对象（非事件对象、非Vue实例）
            if (resetObj && typeof resetObj === 'object' && resetObj.constructor === Object) {
                this.viewModuleOptions.searchForm = resetObj
            } else {
                this.viewModuleOptions.searchForm = {}
            }
            // 清空页面选择的排序按钮
            this.$refs[this.viewModuleOptions.ref].clearSort()
            //因为使用了watch重置查询条件，所以这里需要等 DOM 更新完成之后
            this.$nextTick(() => {
                this.getDataList()
            });
        },
        // 删除操作
        handleDelete(row, editTableRef) {
            let data = []
            if (row && row[this.viewModuleOptions.delKey]) {
                data.push(row[this.viewModuleOptions.delKey])
            } else {
                data = this.viewModuleOptions.dataListSelections
            }
            let config = {
                url: this.viewModuleOptions.removeUrl,
                method: 'delete',
                data: data
            }
            let this_ = this
            this.$modal.confirm('是否确认删除编号为"' + data + '"的数据项？').then(function () {
                if (data.length === 0) {
                    this_.$refs[editTableRef].removeCheckboxRow()
                } else {
                    this_.loading = true
                    return this_.viewModuleOptions.axios(config);
                }
            }).then((res) => {
                if (editTableRef) {
                    this.$refs[editTableRef].remove(row)
                }
                this.calculationPage(data.length)
                this.getDataList();
                this.$modal.msgSuccess(res.msg);
                this.viewModuleOptions.dataListSelections = []
            }).catch(() => {
            }).finally(() => {
                this.loading = false
            });
        },
        /**
         *
         * @param params.ref
         * @param params.row
         * @param params.title
         * @param params.fun
         */
        initDialog(params) {
            this.$refs[params.ref].initDialog(params)
        },
        // 导出
        handleExport(params) {
            this.$refs[params.ref].handleExport(params)
        },
        //树表格展开/折叠
        allTreeExpandClick() {
            // -1初始值 0折叠 1展开
            if (this.viewModuleOptions.tree.allTreeExpand === 1) {
                this.viewModuleOptions.tree.allTreeExpand = 0
                this.$refs[this.viewModuleOptions.ref].clearTreeExpand()
            } else {
                this.viewModuleOptions.tree.allTreeExpand = 1
                this.$refs[this.viewModuleOptions.ref].setAllTreeExpand(true)
            }
        },
    }
}
